<template>
	<view class="container">
		<view v-if="loading" class="loading">
			<u-loading mode="circle"></u-loading>
		</view>
		<view v-else class="article-container">
			<view class="article-header">
				<text class="article-title">{{form.title}}</text>
				<view class="article-meta">
					<text class="article-date">发布时间：{{form.date}}</text>
					<text class="article-source">来源：{{form.source}}</text>
					
				</view>
				<view class="article-meta">
					<text class="article-update">更新时间：{{form.updateDate}}</text>
					<text class="article-author">作者：{{form.author}}</text>
					<!-- <text class="article-checker">审核人：{{form.checkUser}}</text> -->
				</view>
			</view>
			<view class="article-content">
				<template v-if="!isContentEmpty">
					<rich-text :nodes="form.content" class="rich-content"></rich-text>
				</template>
				<template v-else>
					<view class="no-data">未查询到数据</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
  data() {
    return {
      form: {
        id: undefined,
        title: '',
        content: '',
        source: '',
        date: '',
        author: '',
        updateDate: '',
        checkUser: '',
        isFw: false
      },
      loading: false
    };
  },
  computed: {
    isContentEmpty() {
      if (!this.form.content) return true;
      let str = this.form.content
        .replace(/<!--.*?-->/g, '') // 去掉注释
        .replace(/<[^>]+>/g, '')    // 去掉所有标签
        .replace(/[\s　]/g, '');    // 去掉所有空格（含全角空格）
      return !str;
    }
  },
  onLoad(options) {
    if (options.id) {
      this.form.isFw = options.isFw === 'true';
      this.form.id = options.id;
      this.loadArticleDetail();
    }
  },
  methods: {
    // 加载文章详情
    async loadArticleDetail() {
      if (!this.form.id) return;
      
      this.loading = true;
      try {
        const res = await this.$u.api.getArticleDetail(this.form.id);
        if (res.resultEntity && res.resultEntity.data) {
          const article = res.resultEntity.data;
          const isFw = this.form.isFw;
          // 处理图片路径
          let content = article.articleData ? article.articleData.content : '';
          if (content) {
            content = content.replace(/<img[^>]+src=["']([^"']+)["'][^>]*>/g, (match, src) => {
              if (src.startsWith('http') || src.startsWith('https')) {
                return match;
              }
              // 只处理以 / 开头的相对路径
              if (src.startsWith('/')) {
                const newSrc = 'https://oa.sdhwj.com' + src;
                return match.replace(src, newSrc);
              }
              return match;
            });
          }
          this.form = {
            id: article.id,
            title: article.title,
            content: content,
            source: article.category ? article.category.categoryName : '',
            date: article.onlineDate ? article.onlineDate.split(' ')[0] : '',
            author: article.createBy ? article.createBy.split('_')[1] : '',
            updateDate: article.updateDate,
            checkUser: article.checkUserName,
            isFw: isFw
          };
        }
      } catch (error) {
        console.error('获取文章详情失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	background-color: #fff;
	min-height: 100vh;
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.article-container {
	padding: 20rpx;
}

.article-header {
	margin-bottom: 30rpx;
	border-bottom: 1px solid #eee;
	padding-bottom: 20rpx;
}

.article-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 20rpx;
	display: block;
}

.article-meta {
	font-size: 24rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 10rpx;
	
	.article-source,
	.article-date,
	.article-author,
	.article-update,
	.article-checker {
		margin-right: 20rpx;
	}
}

.article-content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.8;
	
	.rich-content {
		:deep(p) {
			margin-bottom: 20rpx;
			text-align: justify;
			text-indent: 2em;
		}
		
		:deep(span) {
			font-family: "仿宋_GB2312", "仿宋", serif;
			font-size: 32rpx;
			line-height: 1.8;
		}
		
		// :deep(img) {
		// 	display: block;
		// 	// margin: 20rpx auto;
		// 	max-width: 200rpx !important;
		// 	max-height: 200rpx;
		// 	// width: auto;
		// 	// height: auto;
		// 	border-radius: 8rpx;
		// }
	}
}

.no-data {
	text-align: center;
	color: #999;
	font-size: 32rpx;
	padding: 60rpx 0;
}
</style>
